<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>image</title>
    <!DOCTYPE html>
<html style="background-color: white;">

<head>
    <link rel="icon" href="images/拉黑小怪兽.png">
    <title>上传</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="keywords" content="" />

    <script type="application/x-javascript">
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
    <link href="css/button.css" rel='stylesheet' type='text/css' />
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
    <link href="css/style.css" rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Merriweather+Sans:300,300i,400,400i,700,700i,800"
        rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Mallanna" rel="stylesheet">
    <link href="css/daohang.css" rel='stylesheet' type='text/css' />
    <style>
        .loginButton {

            margin-top: 5px;
            /* 按钮顶部与输入框的距离 */
            width: 300px;
            height: 40px;
            color: white;
            /* 按钮字体颜色 */
            border: 0;
            /* 删除按钮边框 */
            border-radius: 20px;
            /* 按钮圆角边 */
            background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
            /* 按钮颜色 */
            cursor: pointer;
        }

        #imageContainer {
            display: flex;
            flex-wrap: wrap;
        }

        .imageWrapper {
            width: 200px;
            margin: 10px;
            overflow: hidden;
        }

        .imageWrapper img {
            width: 100%;
            height: auto;
        }

        .sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 9999999;
            min-width: 1000px;
        }

        .cd-search {
            width: 60%;
            top: 100%;
            left: 38%;
            border-radius: 25px;
        }

        .cd-search input {
            border-radius: 25px;
        }

        .uploadedImage {
            max-width: 200px;
            max-height: 200px;
            margin: 10px;
        }


        /* 样式化框 */
        .custom-container {
            display: flex;

            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .custom-box {
            width: 100px;
            height: 100px;
            border: 2px solid grey;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            margin-bottom: 10px;
        }

        /* 当鼠标悬停时改变样式 */
        .custom-box:hover {
            background-color: #f0f0f0;
        }

        .add {
            position: relative;
            top: -5px;
            left: 20px;
        }

        /* 样式化文本 */
        .text-inside-box {
            position: relative;
            top: 18px;
            right: 10px;
        }

        .hid .variety {
			position: absolute;
    		z-index: 9999999;
			left: 280px;
			top: 65px;
			font-size: 20px;
    		min-width: 50px;
    		min-height: 32px;
    		text-align: left;
    		white-space: normal;
    		background-color: #fff;
			border: gray solid;
			border-radius: 5px;
			border-width: 1px;
		}

		.hid-arrow:after{
			content: " ";
    		top: 55px;
			left: 300px;
    		margin-left: -10px;
    		border-bottom-color: gray!important;
    		border-top-width: 0!important;
			border-width: 10px;
			position: absolute;
    		display: block;
    		width: 0;
    		height: 0;
    		border-color: transparent;
    		border-style: solid;
		}

		.daohang2-font{
			color: black;
		}

		#daohang-faxian{
			cursor: pointer;
		}

        .user{
            position: relative;
            left: 10px;
            width: 50px;
            height: 50px;
            top: 25px;
            border-radius: 50%;
            overflow: hidden;
        }

        .user img{
            width: 50px;
            height: 50px;
        }

        .user-id{
            position: relative;
            top: 25px;
            height: 20px;
            font-size: 20px;
            text-align: left;
            left: 15px;
        }

        .photo-box {
            height: 450px;
            position: absolute;
            left: 5%;
            overflow: hidden;
        }

        .photo-box img{
            height: 100%;
        }
        
        /*.wenben{
            text-align: left;
            padding: 3px;
        }

        .pl-img{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            overflow: hidden;
        }

        .pl-img img{
            width: 20px;
            height: 20px;
        }

        .pinglun{
            display: flex;
            flex-wrap: wrap;
        }

        .pinglun-user{
            padding-left: 5px;
        }

        .pl-content{
            max-width: 244px;
            word-wrap: break-word;
            
        }*/

        .banner_bottom{
            background-color:white;
        }

        .user-box{
            background-color: rgb(238, 239, 242);
            border-bottom-color: rgb(238, 239, 242);
            border-bottom-style: solid;
            border-bottom-width: 0.733333px;
            border-left-color: rgb(238, 239, 242);
            border-left-style: solid;
            border-left-width: 0.733333px;
        }
        
        .littlebox{
            width: 100%;
            background-color: rgb(255, 255, 255);
            border-bottom-color: rgb(238, 239, 242);
            border-bottom-style: solid;
            border-bottom-width: 0.733333px;
            text-align: left;
            display: flex;
        }

        .but{
            background-color: rgb(255, 255, 255);
            border-color: rgb(238, 239, 242);
            border-style: solid;
        }

        #yi-dz{
            display: none;
        }

        #but{
            color: blue;
            font-size: 11px;
        }

        /*引用的*/
        dt, dd, dl{
            margin: 0;
            padding: 0;
        }
        dt, dd{
            font-weight: 500;
            display: inline-block;
        }

        .time{
            padding: 0 10px;
            color: lightgray;
        }

        textarea{
            width: 820px; height: 50px; resize: none
        }
        #button_submit_div > div > button{
            border: none;
            background: red;
            color: white;
            padding: 4px 10px;
        }
        #button_submit_div{
            text-align: right;
        }

        ul{
            list-style: none;
            padding: 0;
        }
        ul > li:hover{
            cursor: pointer;
        }
        ul > li{
            padding: 10px 10px;
            border-bottom: solid 0.5px lightgray;
            display: block;
        }
        ul > li:last-child{
            border-bottom: none;
        }
        .cmt_img, .right_box{
            display: inline-block;
            vertical-align: middle;
        }
        .avatar{
            display: block;
        }
        aside, main{
            background: white;
            vertical-align: top;
            margin-top: 50px;
            box-shadow: 2px 0 2px 0 lightgray;
            display: inline-block;
        }
        aside{
            margin-left: 20px;
            text-align: center;
            width: 300px;
        }
        main{
            padding: 20px;
            text-align: left;
            width: 900px;
        }
        .form_item{
            padding: 10px 0;
        }
        .menu > div{
            display: inline-block;
            padding: 10px 10px;
        }
        .menu > div:hover{
            background: deepskyblue;
            cursor: pointer;
        }
        .menu{
            margin: 0;
            padding: 0;
            background: white;
            position: absolute;
            width: 100%;
            text-align: center
        }
        input, textarea{
            border: solid 0.5px lightgray;
            width: 280px;
            border-radius: 3px;
        }
        input{
            padding: 4px 4px;
            height: 30px;
        }
        textarea{
            padding: 10px;
            height: 60px;
        }
    </style>
</head>

<body>
    <!--Header-->
    <div class="top-bar_sub_w3layouts_agile sticky" style="height: 80px; border-bottom: 2px solid grey;">
        <ul class="_ul_ daohangpos">
							<li class=" _need_popover" style=" position: absolute; left: 200px; top: 25px;">
                                <a class="daohang_font" href="shouye.html">首页
                                    <img src="images/down.png" alt="" id="daohang-img"
                                        style="position: relative;left: -5px;width: 18px;">
                                </a>
                                <a href="remen.html" class="daohang_font">热门</a>
                                <a href="xinzuo.html" class="daohang_font">新作</a>
                                <a href="guanzhu.html" class="daohang_font">关注</a>
                                <a href="cangku.html" class="daohang_font">仓库</a>
            </li>
        </ul>
        <div class="search">
			<div class="right" style="right: 90px;">
				<h1><a style="position: absolute;left: 30px;top:20px;color:black;" href="shouye.html">Photo
						Go</a></h1>
				<h5>
                    <a style="width: 150px; position: absolute;right:380px;top:25px;padding: 2px 20px;text-align: center;"
                    class="sign signup " href="userinfo.html">修改个人信息</a>
                  <a style="position: absolute;right:250px;top:25px;padding: 2px 20px;text-align: center;" class="sign signup "
                    href="shangchuan.html">上传</a>
                  <a id="tuichu"
                    style="width: 150px; position: absolute;right:80px;top:25px;padding: 2px 20px;text-align: center;"
                    class="sign signup ">退出登录</a>
				</h5>
			</div>

			<div class="cd-main-header">
				<ul class="cd-header-buttons">
					<li><a class="cd-search-trigger" href="#cd-search"
							style="position: absolute;right: 10px;top: 35px;">
							<span></span></a></li>
				</ul>
				<!-- cd-header-buttons -->
			</div>
			<div id="cd-search" class="cd-search searchstyle">
				<form action="#" method="post">
					<input name="Search" type="search" placeholder="搜索作品、活动或者部落">
				</form>
			</div>
		</div>
        <div class="hid" id="hid" style="top: 48px;display: none;">
			<div class="hid-arrow" style="left: 10px;"></div>
			<div class="variety">
				<p>
					<a href="remen.html" class="daohang2-font">热门</a>
				</p>
				<p>
					<a href="xinzuo.html" class="daohang2-font">新作</a>
				</p>
			</div>
		</div>
		<script>
			var hid = document.getElementById("hid");
			var fx = document.getElementById("daohang-faxian");
			var im = document.getElementById("daohang-img");
			var flag = 0;
			fx.onclick = function(){
				if(flag == 0){
					im.src = "images/scroll-top.png";
					hid.style.display="block";
					flag = 1;
				} else{
					im.src = "images/down.png";
					hid.style.display="none";
					flag = 0;
				}
			}
		</script>
        
    </div>
    </div>
    <div class="banner_bottom" style="height: 800px">
        <div class="container">
            <h3 class="headerw3" style="position: relative;right: 300px;bottom: 80px;"></h3>
            <!----><div class="photo-box" id="ph">
            </div>
            <script>
                const urlParams = new URLSearchParams(window.location.search);
                const imageId = urlParams.get('id');
                var placeimg = document.createElement("img");
                var ph = document.getElementById("ph");
                placeimg.setAttribute('alt',imageId);
                placeimg.setAttribute('id','mainimg');
                ph.appendChild(placeimg);
            </script>
            
            <div class="image-preview" style="position: relative;right: 170px;bottom: 50px;" id="imagePreview"></div>
            <div class="user-box"
                style="width: 350px;height: 800px;position: absolute;right:0;top:80px;">
                <div class="littlebox" id="user-m"
                    style="height: 100px;">
                    <div id="user" class="user"
                        style="position: relative;">
                        <img src="" alt="" id="user-img">
                    </div>
                    <button id="but" style="position: relative;width: 50px;height: 25px;top: 55px;left: 20px;border-radius: 10px;border-width: 1px;background-color: #fff;border-color: blue;">+关注</button>
                    <div id="user-id" class="user-id" style="position: relative;left: -30px;">
                        这是上传者用户名
                    </div>
                    
                    
                </div>

                <div class="littlebox" id="recommend-m"
                    style="height: 50px;">
                    <div id="dianzan" style="margin-top: 12.5px;margin-bottom: 12.5px;">
                        <svg id="dz" t="1699447897356" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4183" width="25" height="25"><path d="M512 901.747c-13.584 0-26.122-4.18-37.094-13.061-8.882-7.315-225.698-175.02-312.424-311.38-28.735-44.93-68.441-106.057-68.441-192.784 0-144.718 108.147-262.269 240.326-262.269 67.396 0 131.657 30.825 177.633 84.637 45.453-54.335 109.192-84.637 177.11-84.637 132.702 0 240.327 117.551 240.327 262.27 0 85.159-37.094 143.673-67.396 191.216l-1.045 1.567c-86.727 136.36-303.543 304.588-312.425 311.38-10.449 8.359-22.987 13.06-36.571 13.06zM334.367 164.049c-109.714 0-198.53 98.743-198.53 220.473 0 74.188 33.959 127.478 61.649 170.319 83.07 130.09 294.138 294.139 303.02 300.93 3.657 2.613 7.314 4.18 11.494 4.18s7.837-1.567 11.494-4.18c8.882-6.791 219.95-170.84 303.02-300.93l1.045-1.568c28.212-44.93 60.604-95.608 60.604-168.75 0-121.209-89.339-220.474-198.53-220.474-60.082 0-115.984 29.257-153.6 80.98l-6.27 8.881c-4.18 5.225-10.449 8.36-16.718 8.36s-13.061-3.135-16.718-8.36l-6.27-8.881c-39.706-51.2-96.13-80.98-155.69-80.98z" p-id="4184"></path></svg>
                        <svg id="yi-dz" t="1699447614861" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4048" width="25" height="25"><path d="M512 901.746939c-13.583673 0-26.122449-4.179592-37.093878-13.061225-8.881633-7.314286-225.697959-175.020408-312.424489-311.379592C133.746939 532.37551 94.040816 471.24898 94.040816 384.522449c0-144.718367 108.146939-262.269388 240.326531-262.269388 67.395918 0 131.657143 30.82449 177.632653 84.636735 45.453061-54.334694 109.191837-84.636735 177.110204-84.636735 132.702041 0 240.326531 117.55102 240.326531 262.269388 0 85.159184-37.093878 143.673469-67.395919 191.216327l-1.044898 1.567346c-86.726531 136.359184-303.542857 304.587755-312.424489 311.379592-10.44898 8.359184-22.987755 13.061224-36.571429 13.061225z" fill="#E5404F" p-id="4049"></path></svg>
                    </div>
                    <div class="dz-count" id="dz-count" style="margin-top: 10px;font-size: 20px;">0</div>
                    <div style="position: relative;left: 10px;height: 35px;width: 150px;top: 12px;left: 150px;display: flex;">
                        <svg t="1699451006985" class="icon" viewBox="0 0 1637 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5328" width="30px" height="30px"><path d="M1625.214103 479.296883C1534.168625 366.274911 1207.137455 0 818.3628 0S104.649974 366.274911 11.511497 479.296883a52.324987 52.324987 0 0 0 0 65.406234c91.568728 113.021972 418.599898 479.296883 806.851303 479.296883s715.805825-366.274911 806.851303-479.296883a52.324987 52.324987 0 0 0 0-65.406234z m-806.851303 439.529893c-313.949923 0-587.609607-278.892182-698.015329-407.088401C230.753194 383.542156 507.029126 104.649974 818.3628 104.649974S1405.972407 383.542156 1517.42463 511.738375c-111.452223 128.196219-387.728155 407.088401-699.06183 407.088401z" fill="" p-id="5329"></path>
                            <path d="M815.746551 261.624936a245.40419 245.40419 0 1 0 245.40419 245.40419A245.40419 245.40419 0 0 0 815.746551 261.624936z m0 386.158406a140.754216 140.754216 0 1 1 140.754215-140.754216 140.754216 140.754216 0 0 1-140.754215 141.800716z" fill="" p-id="5330"></path></svg>
                        <div style="font-size: 20px;" id="liulan"></div>
                    </div>
                </div>
                <div class="littlebox" id="title-m"
                    style="height: 100px;">
                    <div id="title" 
                        style="font-size: 30px; color: rgba(0, 0, 0, 0.65);position: relative;top:25px;margin: 10px;">
                    这是标题</div>
                </div>
                <div class="littlebox" id="pinglun-m"
                    style="height: 550px;background-color: rgb(238, 239, 242);">
                    <main onclick="mainCLick(event)" style="text-align: left;width: 350px;margin-top: 0;background-color: rgb(238, 239, 242);">
                        
                        <div class="form_item" style="width: 330px;">
                            <label class="label_img" style="position: relative;top: -20px;">
                                <img src="" width="25px" style="border-radius: 100%" id="user-img2">
                            </label>
                            <textarea id="comment_space"
                                      onkeyup="readKey(event)"
                                      onclick="commentFocus(event)"
                                      placeholder="请输入您要评论的内容"></textarea>
                        </div>
                        <div id="button_submit_div">
                        </div>
                        <hr/>
                        <div id="comment_view">
                        </div>
                    </main>
                </div>
                
                
                <!--<p style="position: relative;top:30px;right:140px;font-size: 16px;font-weight: 600;color: #222;line-height: 1.25;">
                    描述：</p>
                <div id="miaoshu" class="wenben"
                    style="font-size:15px;width:250px;height: 80px; color: rgba(0, 0, 0, 0.65); border: 1px solid gray;position: relative;top: 7px;left: 70px;">
                这是描述</div>


                <p style="position: relative;top:30px;right:140px;font-size: 16px;font-weight: 600;color: #222;line-height: 1.25;">
                    评论：</p>
                <form id="pinglun-box" class="wenben"
                    style="overflow: auto;font-size:15px;width:250px;max-height: 200px;height: 200px; color: rgba(0, 0, 0, 0.65); border: 1px solid gray;position: relative;top: 7px;left: 70px;">
                    <div class="pinglun">
                        <img src="images/拉黑小怪兽.png" alt="头像" class="pl-img">
                        <div class="pinglun-user">doc:</div>
                        <p class="pl-content">红红火火恍恍惚惚或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
                        </p>
                        <img src="images/拉黑小怪兽.png" alt="头像" class="pl-img">
                        <div class="pinglun-user">doc:</div>
                        <p class="pl-content">红红火火恍恍惚惚或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
                        </p>
                        <img src="images/拉黑小怪兽.png" alt="头像" class="pl-img">
                        <div class="pinglun-user">doc:</div>
                        <p class="pl-content">红红火火恍恍惚惚或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
                        </p>
                        <img src="images/拉黑小怪兽.png" alt="头像" class="pl-img">
                        <div class="pinglun-user">doc:</div>
                        <p class="pl-content">红红火火恍恍惚惚或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
                        </p>
                        <img src="images/拉黑小怪兽.png" alt="头像" class="pl-img">
                        <div class="pinglun-user">doc:</div>
                        <p class="pl-content">红红火火恍恍惚惚或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
                        </p>
                    </div>
                </form>-->
                
            </div>
        </div>
    </div>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <script type="text/javascript">
        var mainimg = document.getElementById("mainimg");
        var img_id = mainimg.alt //图片后端id
        var user_m;//查询用户信息
        
        var re;//查询图片详情
        $.ajax({
            async: false,
            method: 'get',
            url: 'http://localhost:7777/article/'+img_id,
            contentType: 'application/json;charset=UTF-8',
            success: function(result){
                re = result["data"];
                console.log(re)
            }
        });
        /*re = {
            "title": "waq",
            "viewCount": 1,
            "photo": "https://sg-blog-oss.oss-cn-beijing.aliyuncs.com/2022/01/15/fd2e9460c58a4af3bbeae5d9ed581688.png",
            "recommendCount": 2,
            "createBy": 1,
        }*/
        
        const token = localStorage.getItem("token");
        const userid = localStorage.getItem("userid");
        var uid = re["createBy"];//查询用户所用id
        console.log(uid);
        $.ajax({
            async: false,
            method: 'get',
            url: 'http://localhost:7777/user/'+String(uid),
            contentType: 'application/json;charset=UTF-8',
            success: function(result){
                user_m = result["data"];
                console.log(result);
            }
        });
        /*user_m ={
            "id": 2,
            "username": "huangyu",
            "nickname": "aloha",
            "avatar": "images/拉黑小怪兽.png"
        }*/
        //添加用户
        var us = document.getElementById("user-img");
        var us2 = document.getElementById("user-img2");
        console.log(user_m);
        us.src = user_m["avatar"];
        var us_id = document.getElementById("user-id");
        us_id.innerHTML = user_m["nickName"];

        //本用户头像
        var user_mes;
        $.ajax({
            headers: {"token":token},
            async: false,
            method: 'get',
            url: 'http://localhost:7777/user/'+userid,
            contentType: 'application/json;charset=UTF-8',
            success: function(result){
                user_mes = result["data"];
                console.log(result);
            },
            error: function(){
            }
        });
        // var user_img = user_mes["avater"];//当前登录用户的头像
        // var user_name = user_mes["nickName"];//当前登录用户昵称
        // us2.src = user_img;


        //添加图片
        var main_img = document.getElementById("mainimg");
        main_img.setAttribute('src',re["photo"]);
        //添加标题
        var title = document.getElementById("title");
        title.innerHTML = re["title"];
        //添加点赞
        var flag = 0;
        var flag2 = 1;

        var re_data ={
            "article_id":img_id,
            "user_id": userid,
        }
     
        var dz_data = {
            "status": 0
        };
        
        $.ajax({
            // headers: {"token":token},
            async: false,
            method: 'post',
            url: 'http://localhost:7777/praise/status',
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify(re_data), 
            success: function(result){
                dz_data = result["data"];
                console.log(result);
                flag2 = 1;
            },
            error: function(){
                flag2 = 0;
            }
        });

        

        var rec = re["recommendCount"];
        var dz = document.getElementById("dz");
        var yi_dz = document.getElementById("yi-dz");
        var dianzan = document.getElementById("dianzan");
        var dz_count = document.getElementById("dz-count");
        dz_count.innerHTML = rec;
        function recommend(flag,rec){
            dianzan.onclick = function(){
                $.ajax(
                    {
                    headers: {"token":token},
                    async: false,
                    method: 'put',
                    url: 'http://localhost:7777/article/updatePraiseCount',
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(re_data),
                    success: function(result){
                        dz_data = result["data"];
                    },
                    error: function(){
                    }
                });
                if(flag2 == 0){
                    alert("请先登录！");
                }
                else{
                    if(flag==0){
                        dz.style.display = 'none';
                        yi_dz.style.display = 'block';
                        dz_count.innerHTML = rec + 1;
                        flag = 1;
                    }
                    else{
                        dz.style.display = 'block';
                        yi_dz.style.display = 'none';
                        dz_count.innerHTML = rec;
                        flag = 0;
                    }
                }
            }
        };
        if(dz_data["status"] == 0){
            flag = 0;
            recommend(flag,rec);
        }
        else{
            flag = 1;
            dz.style.display = 'none';
            yi_dz.style.display = 'block';
            recommend(flag,rec-1);
        }
        //添加浏览量
        var liu = document.getElementById("liulan");
        console.log(re)
        liu.innerHTML = re["viewCount"]+1;
        $.ajax({
            method: 'put',
            async: false,
            url: 'http://localhost:7777/article/updateViewCount/'+img_id,
            success: function(result){
                console.log(result);
            },
            error: function(){
            }
        });
        var gz = document.getElementById("but");
        var flag1 = 0;
        var gz_data = {
            "userId": userid,
            "userLikeId": uid,
        }
        var getgzdata={
            "status": 0
        };
        $.ajax({
            // headers: {"token":token},
            async: false,
            method: 'post',
            url: 'http://localhost:7777/fans/likeStatus',
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify(gz_data), 
            success: function(result){
                getgzdata = result["data"];
                console.log(result);
            },
            error: function(){
            }
        })
        function guanz(flag1){
            gz.onclick = function(){
                $.ajax({
                    headers: {"token": token},
                    async:false,
                    method: 'put',
                    url: 'http://localhost:7777/user/updateUserLike',
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(gz_data),
                    success: function(result){
                        getgzdata = result["data"];
                    },
                    error: function(){
                    }
                });
                if(flag2 == 0){
                    alert("请先登录！");
                }
                else{
                    if(flag1 == 0){
                        gz.innerHTML = "已关注";
                        flag1 = 1;
                    }
                    else{
                        gz.innerHTML = "+关注";
                        flag1 = 0;
                    }
                }
            }
        }
        
        
        if(getgzdata["status"] == 0){
            flag1 = 0;
            guanz(flag1);
        }
        else{
            flag1 = 1;
            gz.innerHTML = "已关注";
            guanz(flag1);
        }
        
        
        //获取评论
        
        var pinglun_con;
        $.ajax({
            async:false,
            method: 'get',
            url: 'http://localhost:7777/comment/commentList/'+ img_id,
            success: function(result){
                pinglun_con = result["data"];
                console.log(pinglun_con)
            }
        });

// pinglun_con =[

//       {
//         "id": 1,
//         "type": "0",
//         "articleId": 2,
//         "rootId": -1,
//         "content": "啦啦啦",
//         "toCommentUserId": -1,
//         "toCommentId": -1,
//         "createBy": 1,
//         "createTime": "2023-11-01T10:44:37.000+00:00",
//         "username": "aloha",
//         "userimg": "images/t1.jpg",
//         "toCommentUserName": null,
//         "children": [
//           {
//             "id": 2,
//             "type": "0",
//             "articleId": 2,
//             "rootId": 1,
//             "content": "零零",
//             "toCommentUserId": -1,
//             "toCommentId": 1,
//             "createBy": 1,
//             "createTime": "2023-11-01T11:48:00.000+00:00",
//             "username": "aloha",
//             "userimg": "images/t1.jpg",
//             "toCommentUserName": null,
//             "children": [
//           {
//             "id": 3,
//             "type": "0",
//             "articleId": 2,
//             "rootId": 1,
//             "content": "11",
//             "toCommentUserId": -1,
//             "toCommentId": 2,
//             "createBy": 1,
//             "createTime": "2023-11-01T11:48:00.000+00:00",
//             "username": "aloha",
//             "userimg": "images/t1.jpg",
//             "toCommentUserName": null,
//             "children": null
//           }
//         ]
//           }
//         ]
//       }
   
// ]


        //评论实现
    getRandomId = function () {
        return 'id'.concat(Math.floor((Math.random(10) * 10000000000000000)).toString());
    };
    getCurrentTime = function () {
        return new Date().toLocaleString();
    };
 
    var curReplyTargetTag = null;
    
    var curArr = null;
 
    var parentId = null;
 
    var commentList = [];//评论列表

    var root_id = -1;//根评论id暂存
    var tocomment_id = -1;//回复目标评论id暂存
    var data1 ={
        "private Long articleId": '',//文章id
        "private Long rootId": '',//根评论id
        "private String content": '',//评论内容
        "private Long toCommentId": '',//回复目标评论id
    };
    data1["private Long articleId"] = Number(img_id);
    var commentTree = {
        id:'',//评论写入id
        houduanid: '',//从后端获得的评论id
        commentator: '',//评论者
        createBy:'',//评论者id
        author: '',//回复目标
        toCommentId: '',//回复目标id
        rootId: '',//根评论id
        comment: '',
        time: '',
        userimg: '',
        reply: []
    };//评论树
      //给评论列表添加已有评论树
    /**/addcomment = function(pl_list,author,arr){//原数据rows或其迭代children，回复目标，评论列表或其迭代reply
        if(pl_list.length > 0){
            for(var i=0;i<pl_list.length;i++){
                console.log(pl_list.length);
                var pl_time;
                var ti = pl_list[i]["createTime"];
                console.log(pl_list[i]);
                pl_time = ti.substring(8,10)+'/'+ti.substring(5,7)+'/'+ti.substring(0,4)+','+ti.substring(11,19),
                commentTree = {
                    id: getRandomId(),
                    houduanid: pl_list[i]["id"],
                    commentator: pl_list[i]["username"],
                    createBy: pl_list[i]["createBy"],
                    author: author,
                    toCommentId: pl_list[i]["toCommentId"],
                    rootId: pl_list[i]["rootId"],
                    comment: pl_list[i]["content"],
                    time: pl_time,
                    userimg: pl_list[i]["userimg"],
                    reply: pl_list[i]["children"]
                };
                
                arr.push(commentTree);
                if(pl_list[i]["children"] != null && pl_list[i]["rootId"] == -1){//如果有children且为根评论就迭代
                    addcomment(pl_list[i]["children"],pl_list[i]["username"],arr[i]["reply"]);
                }
                if(pl_list[i]["children"] != null && pl_list[i]["rootId"] != -1){//如果有children且不为根评论就写入其后
                    addcomment(pl_list,pl_list[i]["username"],arr);
                }
            }
        }
    }
    
    addcomment(pinglun_con,"anonymous",commentList);
    console.log(commentList);
    
    window.onload = function (ev) {
        // the function will be called at first while page loads
        initTreeComment();
    };
 
    initTreeComment = function () {
        var commentView = document.getElementById('comment_view');
        if (commentList.length === 0) {
            noComment(commentView)
        } else {
            haveComment(commentView, commentList)
        }
    };
 
    noComment = function (commentView) {
        commentView.style.textAlign = 'center';
        commentView.innerText = 'No comments'
    };
 
    commentFocus = function (ev) {
        ev.stopPropagation();
        document.getElementById('comment_space').focus();
        renderReplyBar();
    };
 
    renderReplyBar = function () {
 
        var commentSpace = document.getElementById('comment_space');
        var textareaLen = commentSpace.value.length;
 
        var htmlText = '';
        htmlText +=
            '<div>' +
            '  <span style="color: lightgray; margin-right: 20px">' +
            '    还可以输入' +
            '    <span id="char_count">'+ (1000 - textareaLen) +'</span>' +
            '    个字符' +
            '  </span>';
 
        if(commentSpace.placeholder.charAt(0) === '回' || textareaLen > 0) {
            htmlText += '<button id="cancel_reply" ' +
                        '        onclick="cancelReply(event, this)"' +
                        '        style="margin-right: 20px;">'
        } else {
            htmlText += '<button id="cancel_reply"' +
                        '        onclick="cancelReply(event, this)"' +
                        '        style="margin-right: 20px;display: none;">'
        }
 
        htmlText += '取消回复</button>' +
                    '<button id="submit_button">提交</button>' +
                    '</div>';
 
        document.getElementById('button_submit_div').innerHTML = htmlText;
 
        submitComment(commentSpace);
    };

    var parentnode;
    var houduanid = 3;
    function getparentnode(id,list){
        for(var i=0;i<list.length;i++){
            if(id == list[i]["id"]){
                parentnode = list[i];
            }
            else{
                getparentnode(id,list[i]["reply"]);
            }
        }
    }

    submitTree = function (submitButton, textareaEle) {
 
        submitButton.onclick = function (ev) {
        if(flag2 == 0){
            alert("请先登录！");
        }else{
            ev.stopPropagation();
            console.log(parentId);
            var text = textareaEle.value;
            if (text.length > 0){
                var plcHolder = textareaEle.placeholder;
                if(plcHolder.charAt(0) === '回') {
                    getparentnode(parentId,commentList);
                    plcHolder = plcHolder.substring(plcHolder.indexOf(' '), plcHolder.length);
                    root_id = parentnode["rootId"];
                    if(parentnode["rootId"] == -1){
                        root_id = parentnode["houduanid"];
                    }
                    tocomment_id = parentnode["houduanid"];
                } else {
                    curArr = commentList;
                    plcHolder = "anonymous";
                    root_id = -1;
                    tocomment_id = -1;
                }
                var commentator = user_name;//当前用户的昵称
 
                if(commentator.trim().length === 0) {
                    alarmIfEmpSpace();
                } else {
                    //先发送评论获得后端id
                    // houduanid++;
                    data1["private Long rootId"] = root_id;
                    data1["private Long toCommentId"] = tocomment_id;
                    data1["private String content"] = text;
                    console.log(data1);
                    $.ajax({
                        headers:{"token": token},
                        method:'post',
                        async: false,
                        url: 'http://localhost:7777/comment',
                        contentType: 'application/json;charset=UTF-8',
                        data: JSON.stringify(data1),
                        success: function(result){
                            houduanid = result["data"]["id"];
                        }
                    })
                    commentTree = {
                        id: getRandomId(),
                        houduanid: houduanid,
                        commentator: commentator,
                        createBy: userid,//当前的用户id
                        author: plcHolder,
                        toCommentId: tocomment_id,//回复者id
                        rootId: root_id,//根评论id,
                        comment: text,
                        time: getCurrentTime(),
                        userimg: user_img,//当前用户的头像
                        reply: []
                    };
                    curArr.push(commentTree);
                    console.log(commentList);
                    initTreeComment();
                }
            } else {
                alarmIfEmpSpace();
            }
        }
        }
    };
 
    alarmIfEmpSpace = function () {
        alert("Nothing worse than itself!")
    };
 
    submitComment = function (textarea) {
        var submitButton = document.getElementById('submit_button');
        submitTree(submitButton, textarea);
    };
 
    cancelReply = function (ev, th) {
        ev.stopPropagation();
        th.style.display = 'none';
        parentId = null;
        document.getElementById('comment_space').value = "";
        countTextareaLength();
        fillPlaceholderOfCommentSpace("请输入您要评论的内容");
 
    };
 
    countTextareaLength = function () {
        var space = document.getElementById('comment_space');
        document.getElementById('char_count').innerText = 1000 - space.value.length;
    };
 
    readKey = function (ev) {
        var space = document.getElementById('comment_space');
        document.getElementById('char_count').innerText = 1000 - space.value.length;
        if(space.value.length > 0) {
            handleCancelButton(space, 'inline-block')
        } else {
            handleCancelButton(space, 'none')
        }
    };
 
    handleCancelButton = function (textArea, status) {
        document.getElementById('cancel_reply').style.display = status;
    };
 
    commentBlur = function () {
        document.getElementById('button_submit_div').innerHTML = ''
    };
 
    haveComment = function (commentView, arr) {
 
        commentView.style.textAlign = 'left';
 
        var htmlText = '';
        arr.forEach(function (value) {
            htmlText +=
                '<ul id="'+ value.id +'" class="comment_ulist" style="">' +
                '  <li class="comment_line_box" id="'+ value.id.substring(0, 4) +'">' +
                '    <a class="cmt_img">' +
                '      <img class="avatar" src="'+ value.userimg +'" width="30px" style="border-radius: 100%">' +
                '    </a>' +
                '    <div class="right_box">' +
                '      <a class="commentator">'+ value.commentator +'</a>';
 
            if (value.author !== 'anonymous') {
                htmlText +=
                    '<span style="margin: 0 10px;color: lightgray">回复</span>' +
                    '<a class="author">'+ value.author +'</a>';
            }
 
            htmlText += '<span class="time">'+ value.time +'</span>';
 
            if (value.comment.length > 10){
                htmlText += ' <span style="display: block; margin-top: 8px" class="comment">'+ value.comment.substring(0, 10) +'</span>';
            } else {
                htmlText += ' <span class="comment">'+ value.comment.substring(0, 10) +'</span>';
            }
 
            htmlText +=
                '  </div>' +
                '  <span style="float: right;" id="'+ value.id.substring(0, 7) +'">' +
                '<a id="'+ value.id.substring(0, 5) +'"' +
                '  style="border: none;display: none;margin-right: 10px;">' +
                '回复</a>';
 
            if(value.reply.length > 0) {
                htmlText += '<a id="'+ value.id.substring(0, 6) +'"' +
                            '         style="border: none;">' +
                            '  查看回复('+ value.reply.length +')</a></span></li></ul>'
            } else {
                htmlText += '</span></li></ul>';
            }
 
        });
 
        commentView.innerHTML = htmlText;
 
        showButton(arr, 1)
    };
 
    showButton = function (arr, sign) {
 
        arr.forEach(function (value) {
 
            var parent = document.getElementById(value.id);
            var broEle = document.getElementById(value.id.substring(0, 4));
            var checkReply = document.getElementById(value.id.substring(0, 6));
            var reply = document.getElementById(value.id.substring(0, 5));
 
            broEle.onmouseover = function (ev) {
                reply.style.display = 'inline-block';
            };
 
            reply.onclick = function (ev) {
                ev.stopPropagation();
                renderReplyBar();
                curReplyTargetTag = parent;
                if(sign === 1) {
                    parentId = value.id
                    curArr = value.reply;
                } else {
                    parentId = value.id
                    curArr = arr;
                }
                document.getElementById('cancel_reply').style.display = 'inline-block';
                var str = "回复 ".concat(value.commentator);
                fillPlaceholderOfCommentSpace(str)
            };
 
            if (value.reply.length > 0) {
 
                checkReply.onclick = function (ev) {
                    ev.stopPropagation();
                    if(checkReply.innerText.trim().charAt(0) === '查'){
                        ifHaveReply(parent, value.reply, broEle);
                        checkReply.innerText = "收起回复";
                    } else {
                        toggleBackReplies(parent);
                        checkReply.innerText = "查看回复("+ value.reply.length +")";
                    }
                };
            }
 
            broEle.onmouseleave = function (ev) {
                reply.style.display = 'none'
            };
        });
    };
 
    toggleBackReplies = function (parentTag) {
        var nodes = parentTag.childNodes;
        var len = nodes.length;
        parentTag.removeChild(nodes[len - 1]);
    };
 
    ifHaveReply = function (parentTag, arr, broEle) {
 
        var li = document.createElement("li");
        li.className = "reply_list";
        li.style.marginLeft = '42px';
        li.style.borderLeft = 'solid 5px lightgray';
 
        var htmlText = '<ul class="comment_ulist">';
 
        arr.forEach(function (value) {
            htmlText +=
                '<li class="comment_line_box" id="'+ value.id.substring(0, 4) +'"><a class="cmt_img" style="margin-left: 10px">' +
                '  <img class="avatar" src="'+ value.userimg +'" width="30px" style="border-radius: 100%">' +
                '</a>' +
                '<div class="right_box">' +
                '  <a class="commentator">'+ value.commentator +'</a>' +
                '  <span style="margin: 0 10px;color: lightgray">回复</span>' +
                '  <a class="author">'+ value.author +'</a>' +
                '  <span class="time">'+ value.time +'</span>';
 
            if (value.comment.length > 10){
                htmlText += ' <span style="display: block; margin-top: 8px" class="comment">'+ value.comment.substring(0, 10) +'</span>';
            } else {
                htmlText += ' <span class="comment">'+ value.comment.substring(0, 10) +'</span>';
            }
 
            htmlText +=
                '</div>' +
                '<span style="float: right;" id="'+ value.id.substring(0, 7) +'">' +
                '<a id="'+ value.id.substring(0, 5) +'"' +
                '        style="display: none;border: none;margin-right: 10px;">' +
                '回复</a>';
 
 
            if(value.reply.length > 0) {
                console.log(value.reply.length)
                htmlText += '<a id="'+ value.id.substring(0, 6) +'"' +
                            '         style="border: none;">' +
                            '查看回复('+ value.reply.length +')</a></span></li>'
            } else {
                htmlText += '</span></li>';
            }
        });
 
        htmlText += '</ul>';
        li.innerHTML = htmlText;
        parentTag.insertBefore(li, broEle.nextSibling);
        showButton(arr, 2)
    };
 
    fillPlaceholderOfCommentSpace = function (str) {
        document.getElementById('comment_space').placeholder = str
    };
 
    mainCLick = function (ev) {
        document.getElementById('button_submit_div').innerHTML = '';
    };
    </script>

<script src="js/main.js"></script>
	<script src="js/responsiveslides.min.js"></script>
	<script>
		$(function () {
			$("#slider4").responsiveSlides({
				auto: true,
				pager: true,
				nav: false,
				speed: 1000,
				namespace: "callbacks",
				before: function () {
					$('.events').append("<li>before event fired.</li>");
				},
				after: function () {
					$('.events').append("<li>after event fired.</li>");
				}
			});
		});
	</script>

</body>

</html>
</head>
<body>
    
</body>
</html>